<template>
  <div class="van_picker_select">
    <van-field required :label="vanCellTitle" readonly is-link :value="dateVal" arrow-direction="down" @click="showPicker"/>
    <div class="select_box" v-if="isShow">
      <van-overlay z-index="100" :show="isShow">
        <div class="van-picker">
          <van-datetime-picker
            type="datetime"
            :value="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="onCancel"
            @confirm="onConfirm"
          />
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script>
  import {formatDateStr} from '../../utils/formatDate'

  export default {
    props: {
      isShow: {
        type: Boolean,
        default: false
      },
      vanCellTitle: ''
    },
    data () {
      return {
        minDate: new Date().getTime(),
        maxDate: new Date(2020, 10, 1).getTime(),
        currentDate: new Date().getTime(),
        dateVal: ''
      }
    },
    methods: {
      showPicker () {
        this.isShow = true
      },
      hiddenPicker () {
        this.isShow = false
      },
      onChange () {
        this.$emit('onChange')
      },
      onConfirm (e) {
        let time = formatDateStr(new Date(e.mp.detail))
        this.dateVal = time
        this.$emit('onConfirm', {value: this.dateVal, time: e.mp.detail})
        this.isShow = false
      },
      onCancel () {
        this.isShow = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  .select_box {
    .van-picker {
      width: 100%;
      position: absolute;
      bottom: 0;
      z-index: 1000;
      background: white;
      -moz-border-radius-topleft: 10px;
      -moz-border-radius-topright: 10px;
    }
  }
</style>

<style>
  .van-cell__value {
    flex: 2 !important;
    text-align: left !important;
  }
</style>
